<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="style.css">
</head>

    
<body>
    <div class="content">
        <div class="wrapper">
            <div class="form-wrapper">
                <div class="login-form">
                    <div class="tips">
                        <h1>登录.</h1>
                        <span>没有账号?</span>
                        <span class="signup-into">现在注册一个</span>
                    </div>
                    <div class="form-wrapper">
                        <form action="http://152.136.105.29:81/login.php" method="POST">
                            <div class="input-wrapper user">
                                <input type="text" name="username" class="inputs">
                            </div>
                            <div class="input-wrapper pwd">
                                <input type="password" name="password" class="inputs">
                            </div>
                        <div class="input-wrapper veri-code">

                        </div><br><br>
                            <div class="btn-wrapper">
                                
                                <button type="submit" class="form-btn login-btn">Login</button>
                            </div>
                        </form>
                        <div class="other-login">
                            <div class="divider">
                                <span class="line"></span>
                                <span class="divider-text">或者</span>
                                <span class="line"></span>
                            </div>
                            <div class="other-login-wrapper">
                                <a href="https://github.com/login/oauth/authorize?client_id=Iv23liZpbvDWDTYEoGRw&redirect_uri=http://152.136.105.29:81/github_callback.php">
                                    <div class="other-login-item">
                                        <img src="./asset/GitHub.png" alt="Github">
                                    </div>
                                </a>
<!--
                                <div class="other-login-item">
                                    <img src="./asset/WeChat.png" alt="WeChat">
                                </div>-->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="signup-form">
                    <div class="tips">
                        <h1>现在来注册一下吧.</h1>
                        <span>账号或密码想起来了？</span>
                        <span class="login-into">登录</span>
                    </div>
                    <div class="form-wrapper">
                        <form action="http://152.136.105.29:81/register.php" method="POST">

                            <div class="input-wrapper user">
                                <input type="text" name="username" placeholder="用户名" required>
                            </div>
                            <div class="input-wrapper user">
                                <input type="email" name="email" placeholder="电子邮件" required>
                            </div>
                            <div class="input-wrapper pwd">
                                <input type="password" name="password" placeholder="密码" required>
                            </div>
                            <div class="input-wrapper pwd">
                                <input type="password" name="confirm_password" placeholder="确认密码" required>
                            </div>
                            <button type="submit" class="form-btn">完成注册</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="搜索" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>
    
</body>
<script>
    <script>
    let veriCodeTips = document.querySelector('.veri-code-tips');
    let veriCode = document.querySelector('.veri-code');
    let signupInto = document.querySelector('.signup-into');
    let otherLoginBtn = document.querySelector('.other-login-btn');
    let signupForm = document.querySelector('.signup-form');
    let loginForm = document.querySelector('.login-form');
    let loginInto = document.querySelector('.login-into');
    let pwdBtn = document.querySelector('.pwd');
    let reckonTimeFlag = 5; //倒计时
    let reckonTime; //定时器
    let otherLoginFlag = false;
    //定时器
    function countDown() {
        veriCodeTips.innerHTML = `RESEND(${reckonTimeFlag})`
        reckonTimeFlag--;
        if (reckonTimeFlag < 0) {
            clearInterval(reckonTime);
            reckonTimeFlag = 60;
            veriCodeTips.innerHTML = `Click To Get`;
            veriCodeTips.style.color = "rgb(39, 150, 247)";
            veriCodeTips.onclick = veriCodeTipsClick;
        }
    }
    //点击事件触发的方法
    function veriCodeTipsClick() {
        veriCodeTips.onclick = null;
        veriCodeTips.style.color = "rgb(153, 151, 151)";
        reckonTime = setInterval(countDown, 1000);
        countDown();
    }
    //验证码登录设置点击事件
    veriCodeTips.onclick = function () {
        veriCodeTipsClick();
    }
    loginInto.onclick = function () {
        signupForm.style.zIndex = '0';
        signupForm.style.opacity = '0';
        signupForm.style.transform = 'translate(0, 0px)';
        setTimeout(function () {
            loginForm.style.opacity = '1';
            loginForm.style.zIndex = '1';
        }, 500)
    }
    signupInto.onclick = function () {
        loginForm.style.opacity = '0';
        loginForm.style.zIndex = '0';
        setTimeout(function () {
            signupForm.style.zIndex = '1';
            signupForm.style.opacity = '1';
            signupForm.style.transform = 'translate(0, 50px)';
        }, 500)
    }
    otherLoginBtn.onclick = function() {
        if(otherLoginFlag) {
            veriCode.style.opacity = '0';
            veriCode.style.zIndex = '0';
            veriCode.style.transform = 'translate(0, 0px)';
            pwdBtn.style.opacity = '1'
            otherLoginBtn.innerHTML = 'VeriCode Login';
            otherLoginFlag = false;
        } else {
            veriCode.style.opacity = '1';
            veriCode.style.zIndex = '1';
            veriCode.style.transform = 'translate(0, -90px)';
            pwdBtn.style.opacity = '0'
            otherLoginBtn.innerHTML = 'Password Login';
            otherLoginFlag = true;
        }
    }
</script>

</html>
